<template>
  <div class="base-info">
    <h3>机构信息</h3>
    <el-row  class="base-info-form" type="flex" justify="start">
      <el-col :span="4"></el-col>
      <el-col :span="13">
        <el-form inline-message ref="baseInfoForm" :model="baseInfoForm" label-width="200px">
          <el-form-item label="机构名称">
            <el-input v-model="baseInfoForm.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="baseInfoForm.content"></el-input>
          </el-form-item>
          <el-form-item label="法人代表">
            <el-input v-model="baseInfoForm.head"></el-input>
          </el-form-item>
          <el-form-item label="成立时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="baseInfoForm.buildTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="组织机构代码">
            <el-input v-model="baseInfoForm.code"></el-input>
          </el-form-item>
          <el-form-item label="组织机构许可证书">
            <div v-loading="downloadShow">
              <el-upload
                class="upload-demo"
                ref="upload"
                :show-file-list="false"
                action="/meta/organization/fileUpload"
                :on-change="uploadFileChange"
                v-model="baseInfoForm.uploadFile"
                :auto-upload="false">
                <el-button slot="trigger" size="mini" type="success">选取文件</el-button>
                <span v-if="baseInfoForm.codeFileName" style="display: inline-block;margin-left: 20px;">{{baseInfoForm.codeFileName}}</span>
              </el-upload>
              <el-button size="mini" @click="downloadFile" type="success">下载</el-button>
            </div>
          </el-form-item>
          <el-form-item label="行政级别">
            <el-radio v-model="baseInfoForm.adminLevelId" v-for="(item,index) in adminLevelData" :label="item.adminLevelId">{{item.name}}</el-radio>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="baseInfoForm.address"></el-input>
          </el-form-item>
          <el-form-item label="网址">
            <el-input v-model="baseInfoForm.website"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :rules="[ { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
            <el-input v-model="baseInfoForm.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phoneNumber">
            <el-input v-model="baseInfoForm.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="上级机构是否可见">
            <el-radio-group v-model="baseInfoForm.parentAccess">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="国家高水平后备人才基地">
            <el-radio-group v-model="baseInfoForm.talentBase">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="附设体育训练机构">
            <el-radio-group v-model="baseInfoForm.trainingOrg">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开展体育技能培训">
            <el-radio-group v-model="baseInfoForm.sportSkill">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="承担文化教育">
            <el-radio-group v-model="baseInfoForm.cultureEdu">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="主管部门">
            <el-select v-model="baseInfoForm.manageId" filterable clearable style="width: 100%;" placeholder="请选择">
              <el-option :label="item.name" :value="item.manageId" v-for="(item,index) in manageData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="依托单位性质">
            <el-radio v-model="baseInfoForm.dependId" v-for="(item,index) in dependenceData" :label="item.dependId">{{item.name}}</el-radio>
          </el-form-item>
          <el-form-item label="机构类别">
            <el-radio-group v-model="baseInfoForm.orgClassifyId" @change="orgClassifyIdChange">
              <el-radio v-for="(item,index) in orgClassifyData" :label="item.orgClassifyId">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="机构种类">
            <el-select v-model="baseInfoForm.orgTypeId" filterable clearable style="width: 100%;" placeholder="请选择">
              <el-option :label="item.name" :value="item.orgTypeId" v-for="(item,index) in orgTypeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申办资质">
            <el-radio v-model="baseInfoForm.qualityId" v-for="(item,index) in orgQualityData" :label="item.qualityId">{{item.name}}</el-radio>
          </el-form-item>
          <el-form-item label="文化教育隶属部门">
            <el-radio v-model="baseInfoForm.eduAdminId" v-for="(item,index) in educationAdminTypeData" :label="item.eduAdminId">{{item.name}}</el-radio>
          </el-form-item>
          <el-form-item label="办学模式">
            <el-checkbox-group v-model="baseInfoForm.focusTypeId">
              <el-checkbox v-for="(item,index) in focusTypeData" :label="item.focusTypeId" :key="item.focusTypeId">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="学历等级">
            <el-select v-model="baseInfoForm.educationTypeId" multiple width="100%" filterable clearable style="width: 100%;" placeholder="请选择">
              <el-option :label="item.name" :value="item.educationTypeId" v-for="(item,index) in educationTypeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="命名与表彰">
            <el-form-item
              v-for="(item, index) in baseInfoForm.orgHonor"
              :key="item.honorId"
              :prop="'orgHonor.' + index + '.name'"
              :rules="{required: true, message: '名称不能为空', trigger: 'blur'}"
            >
              <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
                <el-input @blur="orgHonorInsert(item)" v-model="item.name" style="width: 80%;"></el-input>
                <el-button type="success" icon="el-icon-delete" @click.prevent="orgHonorRemoveDomain(item)"></el-button>
              </div>
            </el-form-item>
            <el-button type="success" style="margin-top: 20px;" @click="orgHonorAddDomain">新增</el-button>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="机构别名">
            <el-form-item
              v-for="(item, index) in baseInfoForm.orgNames"
              :key="item.honorId"
              :prop="'orgNames.' + index + '.name'"
              :rules="{required: true, message: '名称不能为空', trigger: 'blur'}"
            >
              <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
                <el-input @blur="orgNamesInsert(item)" v-model="item.name" style="width: 80%;"></el-input>
                <el-button type="success" icon="el-icon-delete" @click.prevent="orgNamesRemoveDomain(item)"></el-button>
              </div>
            </el-form-item>
            <el-button type="success" style="margin-top: 20px;" @click="orgNamesAddDomain">新增</el-button>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>
      </el-col>
      <el-col :span="7">
        <el-button type="success" icon="el-icon-edit-outline" style="position: fixed;bottom: 50px;right: 40px;" @click="onSubmit">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { orgBaseInfoCurrent, orgHonorAll, orgNameAll, orgHonorInsert, orgHonorDelete, orgHonorUpdate, orgNamesInsert, orgNamesDelete, orgNamesUpdate,
  fileUpload, filePreview, adminLevelAll, org_manage_admin_type, org_dependence, org_classify, org_type, org_quality, education_admin_type, focus_type, education_type, base_infoEdu,
  base_infoUpdate,fileDownload
  } from '@/api/organization.js'
  export default {
    data() {
      return {
        baseInfoForm: {
          orgId: '',
          name: '',
          content: '',
          head: '',
          buildTime: '',
          code: '',
          uploadFile: [],
          codeFileName: '',
          adminLevelId: '',
          address: '',
          website: '',
          email: '',
          phoneNumber: '',
          parentAccess: '',
          talentBase: '',
          trainingOrg: '',
          sportSkill: '',
          cultureEdu: '',
          manageId: '',
          dependId: '',
          orgClassifyId: '',
          orgTypeId: '',
          qualityId: '',
          eduAdminId: '',
          focusTypeId: '',
          educationTypeId: '',
          orgHonor: [],
          orgNames: [],
        },
        adminLevelData: [],
        manageData: [],
        dependenceData: [],
        orgClassifyData: [],
        orgTypeData: [],
        orgQualityData: [],
        educationAdminTypeData: [],
        focusTypeData: [],
        educationTypeData: [],
        downloadShow: false,
      }
    },
    created() {
      this.orgBaseInfo()
      this.getOrgHonorAll()
      this.getOrgNamesAll()
    },
    methods: {
      orgClassifyIdChange() {
        org_type(this.baseInfoForm.orgClassifyId).then(res=>{
          if(res.code === 200){
            this.orgTypeData = res.data
            this.baseInfoForm.orgTypeId = ''
          }
        })
      },
      orgBaseInfo() {
        adminLevelAll().then(res=>{
          if(res.code === 200) {
            this.adminLevelData = res.data
          }
        })
        org_manage_admin_type().then(res=>{
          if(res.code === 200) {
            this.manageData = res.data
          }
        })
        org_dependence().then(res=>{
          if(res.code === 200) {
            this.dependenceData = res.data
          }
        })
        org_classify().then(res=>{
          if(res.code === 200) {
            this.orgClassifyData = res.data
          }
        })
        org_type().then(res=>{
          if(res.code === 200) {
            this.orgTypeData = res.data
          }
        })
        org_quality().then(res=>{
          if(res.code === 200) {
            this.orgQualityData = res.data
          }
        })
        education_admin_type().then(res=>{
          if(res.code === 200) {
            this.educationAdminTypeData = res.data
          }
        })
        focus_type().then(res=>{
          if(res.code === 200) {
            this.focusTypeData = res.data
          }
        })
        education_type().then(res=>{
          if(res.code === 200) {
            this.educationTypeData = res.data
          }
        })
        orgBaseInfoCurrent().then(res=>{
          if(res.code === 200) {
            let data = res.data[0]
            this.baseInfoForm.orgId = data.orgId==0?'':data.orgId
            this.baseInfoForm.name = data.name
            this.baseInfoForm.content = data.content
            this.baseInfoForm.head = data.head
            this.baseInfoForm.buildTime = data.buildTime
            this.baseInfoForm.code = data.code
            this.baseInfoForm.uploadFile = data.uploadFile
            this.baseInfoForm.codeFileName = data.codeFileName
            this.baseInfoForm.adminLevelId = data.adminLevelId==0?'':data.adminLevelId+''
            this.baseInfoForm.address = data.address
            this.baseInfoForm.website = data.website
            this.baseInfoForm.email = data.email
            this.baseInfoForm.phoneNumber = data.phoneNumber==0?'':data.phoneNumber
            this.baseInfoForm.parentAccess = data.parentAccess
            this.baseInfoForm.talentBase = data.talentBase
            this.baseInfoForm.trainingOrg = data.trainingOrg
            this.baseInfoForm.sportSkill = data.sportSkill
            this.baseInfoForm.cultureEdu = data.cultureEdu
            this.baseInfoForm.manageId = data.manageId==0?'':data.manageId+''
            this.baseInfoForm.dependId = data.dependId==0?'':data.dependId+''
            this.baseInfoForm.orgTypeId = data.orgTypeId==0?'':data.orgTypeId+''
            this.baseInfoForm.qualityId = data.qualityId==0?'':data.qualityId+''
            this.baseInfoForm.eduAdminId = data.eduAdminId==0?'':data.eduAdminId+''
            this.orgTypeData.forEach(item=>{
              if(item.orgTypeId == this.baseInfoForm.orgTypeId) {
                this.baseInfoForm.orgClassifyId = item.orgClassifyId
              }
            })
            org_type(this.baseInfoForm.orgClassifyId).then(res=>{
              if(res.code === 200){
                this.orgTypeData = res.data
              }
            })
          }
        })
        base_infoEdu().then(res=>{
          if(res.code === 200) {
            this.baseInfoForm.focusTypeId = []
            this.baseInfoForm.educationTypeId = []
            res.data.focusType.forEach(item=>{
              this.baseInfoForm.focusTypeId.push(item.focusTypeId+'')
            })
            res.data.eduType.forEach(item=>{
              this.baseInfoForm.educationTypeId.push(item.educationTypeId+'')
            })
          }
        })
      },
      getOrgHonorAll() {
        orgHonorAll().then(res=>{
          if(res.code === 200 ){
            this.baseInfoForm.orgHonor = res.data
          }
        })
      },
      getOrgNamesAll() {
        orgNameAll().then(res=>{
          if(res.code === 200 ){
            this.baseInfoForm.orgNames = res.data
          }
        })
      },
      onSubmit() {
        let data = {
          orgId: this.baseInfoForm.orgId,
          content: this.baseInfoForm.content,
          head: this.baseInfoForm.head,
          code: this.baseInfoForm.code,
          adminLevelId: this.baseInfoForm.adminLevelId||0,
          address: this.baseInfoForm.address,
          website: this.baseInfoForm.website,
          email: this.baseInfoForm.email,
          phoneNumber: this.baseInfoForm.phoneNumber,
          parentAccess: this.baseInfoForm.parentAccess,
          talentBase: this.baseInfoForm.talentBase,
          trainingOrg: this.baseInfoForm.trainingOrg,
          sportSkill: this.baseInfoForm.sportSkill,
          cultureEdu: this.baseInfoForm.cultureEdu,
          manageId: this.baseInfoForm.manageId||0,
          dependId: this.baseInfoForm.dependId||0,
          orgTypeId: this.baseInfoForm.orgTypeId||0,
          qualityId: this.baseInfoForm.qualityId||0,
          eduAdminId: this.baseInfoForm.eduAdminId||0,
          focusTypeId: this.baseInfoForm.focusTypeId.join(','),
          educationTypeId: this.baseInfoForm.educationTypeId.join(','),
        }
        if(this.baseInfoForm.buildTime) data.buildTime = this.$moment(this.baseInfoForm.buildTime).format('YYYY-MM-DD') + ' 00:00:00'
        base_infoUpdate(data).then(res=>{
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '保存成功！'
            })
          }else{
            this.$message({
              type: 'error',
              showClose: true,
              message: '保存失败！',
            })
          }
        })
      },
      uploadFileChange(data){
        this.downloadShow = true
        let fileName = data.name
        let file = data.raw
        if(file.size > 1024 * 1024 * 100) {
          this.$message({
            type: 'error',
            message: '文件太大，上传失败！'
          })
          this.downloadShow = false
          return
        }
        let fileData = new FormData()
        fileName = encodeURI(fileName)
        fileData.append("fileName", fileName);
        fileData.append("file", file);
        fileUpload(fileData).then(res=>{
          if(res.code === 200 ) {
            this.baseInfoForm.uploadFile = fileName
            this.$message({
              type: 'success',
              message: '上传成功！'
            })
            this.baseInfoForm.codeFileName = data.name
          }else{
            this.$message({
              type: 'error',
              message: '上传失败！',
            })
          }
          this.downloadShow = false
        })
      },
      downloadFile(row) {
        this.downloadShow = true
        fileDownload().then(res=>{
           try {
              var blob = res.data;
             // FileReader主要用于将文件内容读入内存
              var reader = new FileReader();
              reader.readAsDataURL(blob);
              // onload当读取操作成功完成时调用
              reader.onload = function(e) {
                var a = document.createElement('a');
                // 获取文件名fileName
                var fileName = res.headers["content-disposition"].split("=");
                fileName = fileName[fileName.length - 1];
                fileName = fileName.replace(/"/g, "");
                fileName = decodeURI(fileName)
                a.download = fileName;
                a.href = e.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
              }
            }catch{
               this.$message.warning('没有找到文件！')
            }
            this.downloadShow = false
        })
      },
      orgHonorRemoveDomain(item) {
        orgHonorDelete({honorId:item.honorId}).then(res=>{
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            var index = this.baseInfoForm.orgHonor.indexOf(item)
            if (index !== -1) {
              this.baseInfoForm.orgHonor.splice(index, 1)
            }
          }
        })
      },
      orgHonorAddDomain() {
        let index = this.baseInfoForm.orgHonor.length -1
        if(this.baseInfoForm.orgHonor.length!=0 && this.baseInfoForm.orgHonor[index].name === ''){
          this.$refs.baseInfoForm.validateField('orgHonor.' + index + '.name')
        }else{
          this.baseInfoForm.orgHonor.push({
            name: '',
          });
        }
      },
      orgHonorInsert(item) {
        if(item.name != ''){
          if(item.honorId) {
            orgHonorUpdate({honorId:item.honorId,name:item.name}).then(res=>{
              if(res.code === 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: '修改成功！',
                })
              }else{
                this.$message({
                  type: 'error',
                  showClose: true,
                  message: '修改失败！',
                })
              }
            })
          }else{
            orgHonorInsert({name:item.name}).then(res=>{
              if(res.code === 200){
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: '添加成功！',
                })
                this.getOrgHonorAll()
              }else{
                this.$message({
                  type: 'error',
                  showClose: true,
                  message: '添加失败！',
                })
              }
            })
          }
        }
      },
      orgNamesRemoveDomain(item) {
        orgNamesDelete({nameId:item.nameId}).then(res=>{
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            var index = this.baseInfoForm.orgNames.indexOf(item)
            if (index !== -1) {
              this.baseInfoForm.orgNames.splice(index, 1)
            }
          }
        })
      },
      orgNamesAddDomain() {
        let index = this.baseInfoForm.orgNames.length -1
        if(this.baseInfoForm.orgNames.length!=0 && this.baseInfoForm.orgNames[index].name === ''){
          this.$refs.baseInfoForm.validateField('orgNames.' + index + '.name')
        }else{
          this.baseInfoForm.orgNames.push({
            name: '',
          });
        }
      },
      orgNamesInsert(item) {
        if(item.name != ''){
          if(item.nameId) {
            orgNamesUpdate({nameId:item.nameId,name:item.name}).then(res=>{
              if(res.code === 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: '修改成功！',
                })
              }else{
                this.$message({
                  type: 'error',
                  showClose: true,
                  message: '修改失败！',
                })
              }
            })
          }else{
            orgNamesInsert({name:item.name}).then(res=>{
              if(res.code === 200){
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: '添加成功！',
                })
                this.getOrgNamesAll()
              }else{
                this.$message({
                  type: 'error',
                  showClose: true,
                  message: '添加失败！',
                })
              }
            })
          }
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .base-info{

    .base-info-form{
      padding: 10px 10px 50px 10px;
      background-color: #FFFFFF;

      .upload-demo{
        display: flex;
      }
    }

  }
</style>
